<template>
  <div class="Box">
    <!--注册-->
    <div class="containerBox">
      <div class="container3" style="width: 50%" id="SignUp1">
        <div v-if="!isSignIn">
          <h2 class="form_title">Sign Up</h2>
          <el-form class="form">
            <el-form-item>
              <el-input
                placeholder="Email"
                size="medium"
                style="width: 300px; margin: auto; height: 40px"
                v-model="signUpForm.email"
              >
                <template #prepend>
                  <el-icon><Avatar /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                placeholder="Password"
                size="medium"
                style="width: 300px; margin: auto; height: 40px"
                v-model="signUpForm.password"
                show-password
              >
                <template #prepend>
                  <el-icon><Key /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                placeholder="Code"
                size="medium"
                style="
                  width: 200px;
                  margin-left: 35px;
                  margin-right: 0px;
                  height: 40px;
                "
                v-model="signUpForm.code"
              >
                <template #prepend>
                  <el-icon><Key /></el-icon>
                </template>
              </el-input>
              <el-button size="medium" id="code" @click="getCode"
                >获取验证码</el-button
              >
            </el-form-item>
            <el-form-item class="ml-5">
              <el-button
                type="primary"
                size="medium"
                id="btn"
                style="margin-top: 1px"
                @click="signUp"
                >Sign Up</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div v-if="isSignIn">
          <h2 class="form_title">Sign In</h2>
          <el-form class="form">
            <el-form-item>
              <el-input
                placeholder="Email"
                size="medium"
                style="width: 300px; margin: auto; height: 40px"
                v-model="loginForm.email"
              >
                <template #prepend>
                  <el-icon><Avatar /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                placeholder="Password"
                size="medium"
                style="width: 300px; margin: auto; height: 40px"
                v-model="loginForm.password"
                show-password
              >
                <template #prepend>
                  <el-icon><Key /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item class="ml-5">
              <el-button
                type="primary"
                size="medium"
                id="btn"
                style="margin-top: 5px"
                @click="login"
                >Sign In</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="container4" style="width: 50%" id="SignUp2">
        <el-button
          type="primary"
          size="medium"
          id="btn"
          style="margin-top: 45%"
          @click="shiftScreen"
          >{{ isSignIn ? "Sign Up" : "Sign In" }}</el-button
        >
      </div>
    </div>

    <!-- 背景 -->
    <div class="slidershow">
      <div class="slidershow--image" id="image1"></div>
      <div class="slidershow--image" id="image2"></div>
      <div class="slidershow--image" id="image3"></div>
      <div class="slidershow--image" id="image4"></div>
    </div>
  </div>
</template>

<script>
import loginAPI from "@/api/loginAPI";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      //是否是登录界面
      isSignIn: true,

      //登录表单
      loginForm: {
        email: "",
        password: "",
      },

      //注册表单
      signUpForm: {
        email: "",
        password: "",
        code: "",
      },
    };
  },

  methods: {
    sleep(millisecond) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve();
        }, millisecond);
      });
    },

    async shiftScreen() {
      if (this.isSignIn === true) {
        let signUp = document.getElementById("SignUp1");
        signUp.classList.remove("container3");
        signUp.classList.add("container3Move");
        signUp = document.getElementById("SignUp2");
        signUp.classList.remove("container4");
        signUp.classList.add("container4Move");
        await this.sleep(700);
        this.isSignIn = false;
      } else {
        let signUp = document.getElementById("SignUp1");
        signUp.classList.remove("container3Move");
        signUp.classList.add("container3Move2");
        signUp = document.getElementById("SignUp2");
        signUp.classList.remove("container4Move");
        signUp.classList.add("container4Move2");
        await this.sleep(700);
        this.isSignIn = true;
        signUp = document.getElementById("SignUp1");
        signUp.classList.remove("container3Move2");
        signUp.classList.add("container3");
        signUp = document.getElementById("SignUp2");
        signUp.classList.remove("container4Move2");
        signUp.classList.add("container4");
      }
    },

    /**
     * @description 登录
     */
    async login() {
      sessionStorage.removeItem("token");
      // sessionStorage.removeItem("refreshToken");
      await loginAPI.login(this.loginForm).then((res) => {
        if (res.code) {
          sessionStorage.setItem("token", res.data);
          //  sessionStorage.setItem("refreshToken", res.data.refreshToken);
          this.$router.push("/main");
        } else {
          this.loginForm.password = "";
          ElMessage.warning("用户名或密码错误");
        }
      });
    },

    /**
     * @description 获取验证码
     */
    async getCode() {
      await loginAPI.getCode(this.signUpForm.email).then((res) => {
        console.log(res);
      });
    },

    /**
     * @description 注册
     */
    async signUp() {
      await loginAPI.signUp(this.signUpForm).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style>
.Box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.containerBox {
  position: relative;
  width: 740px;
  height: 400px;
}

#code {
  width: 100px;
  margin-left: 0px;
  height: 40px;
  background-color: #095c91;
  background-image: linear-gradient(90deg, #095c91 0%, #0393a3 74%);
  /* border: 0.2px solid #315a7491; */
  color: #e9e9e9;
}
#code:active {
  transform: scale(0.8);
}

#code:focus {
  outline: none;
}
#image1 {
  background-image: url("@/assets/1.jpg");
}
#image2 {
  background-image: url("@/assets/5.jpg");
}
#image3 {
  background-image: url("@/assets/3.jpg");
}
#image4 {
  background-image: url("@/assets/4.jpg");
}
.container3 {
  background-color: #e9e9e9;
  border-radius: 0rem 0.7rem 0.7rem 0rem;
  box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
    0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 5;
  height: 100%;
  margin: 0 0 0 50%;
}

.container3Move {
  background-color: #e9e9e9;
  border-radius: 0rem 0.7rem 0.7rem 0rem;
  box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
    0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 5;
  height: 100%;
  margin: 0 0 0 50%;
  animation-timing-function: linear;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  animation-name: container3MoveLeft;
}

@keyframes container3MoveLeft {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.container3Move2 {
  background-color: #e9e9e9;
  border-radius: 0rem 0.7rem 0.7rem 0rem;
  box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
    0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 5;
  height: 100%;
  animation-timing-function: linear;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  animation-name: container3MoveRight;
}

@keyframes container3MoveRight {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

.container4 {
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 0.7rem 0rem 0rem 0.7rem;
  box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
    0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 5;
  height: 100%;
  margin: 0;
}

.container4Move {
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 0.7rem 0rem 0rem 0.7rem;
  box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
    0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 5;
  height: 100%;
  animation-timing-function: linear;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  animation-name: container4MoveRight;
}

@keyframes container4MoveRight {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

.container4Move2 {
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 0.7rem 0rem 0rem 0.7rem;
  box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
    0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 5;
  height: 100%;
  margin: 0 0 0 50%;
  animation-timing-function: linear;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  animation-name: container4MoveLeft;
}

@keyframes container4MoveLeft {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

#form-input {
  width: 300px;
  margin: auto;
  height: 50px;
}

#btn {
  background-color: #095c91;
  background-image: linear-gradient(90deg, #095c91 0%, #0393a3 74%);
  border-radius: 20px;
  border: 0.2px solid #315a7491;
  color: #e9e9e9;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  padding: 0.9rem 4rem;
  text-transform: uppercase;
  transition: transform 80ms ease-in;
  margin: auto;
  margin-top: 20px;
}

#btn:active {
  transform: scale(0.8);
}

#btn:focus {
  outline: none;
}

.form_title {
  font-weight: 100;
  margin: 0;
  margin-bottom: 1.25rem;
  font-size: 25px;
  font-family: serif;
  margin-top: 40px;
}

.slidershow {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slidershow--image {
  position: absolute;
  width: 100%;
  height: 100%;
  background: no-repeat 50% 50%;
  background-size: cover;
  animation-timing-function: linear;
  animation-duration: 16s;
  animation-iteration-count: infinite;
  opacity: 1;
  transform: scale(1.2);
}

.slidershow--image:nth-child(1) {
  animation-name: kenburns-1;
  z-index: 3;
}

.slidershow--image:nth-child(2) {
  animation-name: kenburns-2;
  z-index: 2;
}

.slidershow--image:nth-child(3) {
  animation-name: kenburns-3;
  z-index: 1;
}

.slidershow--image:nth-child(4) {
  animation-name: kenburns-4;
  z-index: 0;
}
@keyframes kenburns-1 {
  0% {
    opacity: 1;
    transform: scale(1.2);
  }
  1.5625% {
    opacity: 1;
  }
  23.4375% {
    opacity: 1;
  }
  26.5625% {
    opacity: 0;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
  98.4375% {
    opacity: 0;
    transform: scale(1.21176);
  }
  100% {
    opacity: 1;
  }
}

@keyframes kenburns-2 {
  23.4375% {
    opacity: 1;
    transform: scale(1.2);
  }
  26.5625% {
    opacity: 1;
  }
  48.4375% {
    opacity: 1;
  }
  51.5625% {
    opacity: 0;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes kenburns-3 {
  48.4375% {
    opacity: 1;
    transform: scale(1.2);
  }
  51.5625% {
    opacity: 1;
  }
  73.4375% {
    opacity: 1;
  }
  76.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes kenburns-4 {
  73.4375% {
    opacity: 1;
    transform: scale(1.2);
  }
  76.5625% {
    opacity: 1;
  }
  98.4375% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
</style>
